<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{ title }}</span>
      </div>
      <div class="body">
        <el-table
          v-loading="loading"
          :data="data"
          :border="border"
          :size="size"
          v-bind="$attrs"
          style="width: 100%">
          <el-table-column v-for="column in columns" :key="column.key" :label="column.title" :prop="column.key">
            <template slot-scope="scope">
              <column-render :render="column.render" :row="scope.row" :column="column" />
            </template>
          </el-table-column>
          <slot />
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>

export default {
  name: 'BoxList',
  components: {
    //
  },
  props: {
    title: {
      type: String,
      default: ""
    },
    loading: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'mini'
    },
    columns: {
      type: Array,
      default: function() {
        return []
      }
    },
     data: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      //
    }
  },
  methods: {
    
  }
}
</script>

<style>
  .box-card .el-table th {
    background-color: #fff;
  }
</style>

